<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
    <style>
        .query-content div{
            float: left;
            margin-right: 20px;
        }
        .btn-margin{
            margin-right: 10px;
        }
        .query-custom{
            float:left;
        }
    </style>
</head>
<body>
<input type="hidden" value="{$familyId}" id="familyId"/>
<div class="page-container">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="query-content clearfloat">
                <div class="form-group">
                    <button type="button" class="btn btn-primary" id="query">查询</button>
                    <label class="control-label">
                        <label class="control-label">
                            <input type="text" class="form-control month-search" id="time" placeholder="">
                        </label>
                    </label>
                </div>

                <div>
                    <button type="button" class="btn btn-primary" id="count">家族总流水</button>
                    <label class="control-label">
                        <label class="control-label">
                            <input type="text" class="form-control" id="count-flowing" placeholder="家族总流水" disabled>
                        </label>
                    </label>
                </div>
            </div>

            <div class="query-custom">
                <label class="control-label">
                    <label class="control-label">
                        <input type="text" class="form-control date-search" id="start_time" placeholder="">
                    </label>
                </label>
                <label class="control-label">
                    <label class="control-label">至</label>
                </label>
                <label class="control-label">
                    <label class="control-label">
                        <input type="text" class="form-control date-search" id="end_time" placeholder="">
                    </label>
                </label>
                <label class="control-label">
                    <label class="control-label">=</label>
                </label>
                <label class="control-label">
                    <label class="control-label">
                        <input type="text" class="form-control" id="flowing" placeholder="自定义时间总流水" disabled>
                    </label>
                </label>
                <button type="button" class="btn btn-primary" id="sum">计算流水</button>
            </div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>日期</th>
                    <th>收入（钻石）</th>
                    <th>明细</th>
                </tr>
                </thead>
                <tbody id="info">

                </tbody>
            </table>
        </div>
    </div>
</div>
{include file="common:footer"}
<script>
    getData();
    //时间搜索插件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        lay('.month-search').each(function () {
            laydate.render({
                elem: this,
                type: 'month',
                trigger: 'click',
                format: 'yyyy-MM'
            });
        });
    });

    //时间搜索插件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        lay('.date-search').each(function () {
            laydate.render({
                elem: this,
                type: 'datetime',
                trigger: 'click'
            });
        });
    });
    //获取收入数据
    function getData(){
        var queryTime = $('#time').val(),familyId = $('#familyId').val();
        var datas = {
            familyId:familyId
        };
        if(queryTime.length)
            datas.queryTime = queryTime;
        $.ajax({
            type:'get',
            url:'/FamilyFlowingInfoData',
            data:datas,
            dataType:'json',
            success:function(result){
                console.log(result);
                if(result.resultCode == 100){
                    var htmlElement = '',data = result.resultData;
                    for(var i in data){
                        if(data[i].diamonds > 0)
                            htmlElement += "<tr><td>"+ data[i].date + "</td><td>"+ data[i].diamonds +"</td><td class='btn-margin'>"
                                + "<button class='day-flowing btn btn-warning btn-sm btn-margin'>查看</button>";
                        else
                            htmlElement += "<tr><td>"+ data[i].date + "</td><td>"+ data[i].diamonds +"</td><td></td></tr>";
                    }
                    $('#info').html(htmlElement);
                    var dayFlowingObj = $('.day-flowing');
                    if(dayFlowingObj.length){
                        //查看流水详情（天）
                        dayFlowingObj.on('click',function(){
                            var dates = $(this).parent().siblings('td').eq(0).text();
                            layer.open({
                                type: 2,
                                title: ['家族成员流水详情（' + dates + '）','font-size:18px;font-family:楷体;font-weight:700;'],
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['950px', '600px'],
                                content:"/FamilyFlowingDay?familyId=" + familyId + '&dates=' + dates,
                                offset:'auto',
                                scrollbar:false
                            });
                        });
                    }
                }
                else{
                    $('#info').empty();
                }
            },
            error:function(err){
                layer.msg('服务器开小差了！',{
                    time:2000
                });
            }
        });
    }

    //计算房间总流水
    $('#count').click(function(){
        $.ajax({
            type: "get",
            url: "/FamilyFlowingCount",
            data:{
                'familyId':$('#familyId').val()
            } ,
            dataType: 'JSON',
            success: function (re) {
                if (re.code === 100) {
                    console.log(re);
                    $("#count-flowing").attr("value",re.data);
                } else {
                    layer.msg(re.msg,{
                        icon:2,
                        time:1000
                    });
                }
            },
            error: function () {
                alert('服务器出小差了');
            }
        });
    });

    //计算房间流水
    $('#sum').click(function(){
        var start_time = $('#start_time').val();
        console.log(start_time);
        var end_time = $('#end_time').val();

        //将开始时间转为时间戳
        var date = new Date(start_time);
        var time1 = date.getTime();
        //获取当前时间戳
        var timestamp=new Date().getTime();

        if(time1 > timestamp ){
            layer.msg('时间超前啦',{
                icon:2,
                time:1000
            });
            $('#start_time').val(''); //清空
            return false;
        }

        if( start_time ==='' ||  end_time ===''){
            layer.msg('请选择完整的时间',{
                icon:2,
                time:1000
            });
            return false;
        }
        $.ajax({
            type: "get",
            url: "/FamilyFlowingCount",
            data:{
                'start_time':start_time,
                'end_time':end_time,
                'familyId':$('#familyId').val()
            } ,
            dataType: 'JSON',
            success: function (re) {
                if (re.code === 100) {
                    console.log(re);
                    $("#flowing").attr("value",re.data);
                } else {
                    layer.msg(re.msg,{
                        icon:2,
                        time:1000
                    });
                }
            },
            error: function () {
                alert('服务器出小差了');
            }
        });
    });


    //查询某一月的房间流水
    $('#query').click(function(){
        getData();
    });
</script>
</body>
</html>